<template>
    <baidu-map class="map" :center="center" :zoom="zoom" @ready="handler">
      <div id="pointDiv" class="pointDiv">
        <textarea id="rangeVal" class="textcont" rows="4" cols="55"></textarea>
        <div id="butDiv" class="butDiv">
          <button type="button" class="butcs" id="copyBut" @click="copyValue">复制</button>
          <button type="button" class="butcs" id="cleanBut" @click="cleanValue">清空</button>
        </div>
      </div>
    </baidu-map>
</template>

<script>
  export default {
    name: 'bmap',
    data() {
      return {
        BMap: {},
        map: {},
        center: {},
        zoom: 10
      }
    },
    mounted() {},
    methods: {
      handler({ BMap, map }) {
        this.BMap = BMap
        this.map = map
        this.initMap();
      },
      initMap() {
        //初始化南宁市 放大级别13
        this.center = { lng: 108.3733749001, lat: 22.822986998 }
        this.zoom = 13
        this.enableMapClick = false
        //添加左下角比例尺
        this.map.addControl(new BMap.ScaleControl({ anchor: BMAP_ANCHOR_BOTTOM_LEFT }))
        //开启鼠标滚轮缩放
        this.map.enableScrollWheelZoom(true)

        this.map.addEventListener("click", function(e){
          this.clearOverlays();

          var point = e.point;
          var rangeV = document.getElementById("rangeVal").value;
          rangeV = rangeV + point.lng + "," + point.lat + ";";
          document.getElementById("rangeVal").value = rangeV;

          var ply = new BMap.Polygon(rangeV, {strokeWeight: 2, strokeColor: "#ff0000"}); //建立多边形覆盖物

          this.addOverlay(ply);
        });
      },
      copyValue(){
        var target=document.getElementById("rangeVal");
        target.select(); // 选择文本
        document.execCommand("Copy"); // 执行浏览器复制命令
        alert("已复制好，可贴粘。");
      },
      cleanValue(){
        document.getElementById("rangeVal").value = "";
        this.map.clearOverlays();
      }
    }
  }
</script>

<style scoped>
  .map {
    width: 100%;
    height: 100%;
  }
  .pointDiv{
    background-color: #ffffff;
    border:1px solid #000000;
    width: 500px;
    height:150px;

    position:absolute;
    right:0px;
    bottom:0px;
    margin: 0px 30px 30px 0px;
  }

  .textcont{
    width: 460px;
    margin: 5px 0px 0px 20px;
  }

  .butDiv{
    width: 200px;
    margin: 0 auto;
    text-align: center;
  }
  .butcs{
    border:1px solid #d2a000;
    box-shadow: 0 1px 2px #fedd71 inset,0 -1px 0 #a38b39 inset,0 -2px 3px #fedd71 inset;
    background: -webkit-linear-gradient(top,#fece34,#d8a605);
    background: -moz-linear-gradient(top,#fece34,#d8a605);
    background: linear-gradient(top,#fece34,#d8a605);
  }
</style>